<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子卡丁车开发日志 - 集成电路科学与工程学院</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF6B00',
                        tertiary: '#0D9488',
                        dark: '#1D2939',
                        light: '#F9FAFB',
                        card: 'rgba(255, 255, 255, 0.75)'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                        heading: ['Poppins', 'sans-serif']
                    },
                    animation: {
                        'float': 'float 6s ease-in-out infinite',
                        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'bounce-slow': 'bounce 3s infinite',
                        'spin-slow': 'spin 20s linear infinite',
                        'wave': 'wave 8s linear infinite',
                        'fade-in': 'fadeIn 1s ease-out forwards',
                        'slide-up': 'slideUp 0.8s ease-out forwards',
                        'slide-right': 'slideRight 0.8s ease-out forwards',
                        'slide-left': 'slideLeft 0.8s ease-out forwards',
                        'scale-in': 'scaleIn 0.6s ease-out forwards',
                        'rotate-3d': 'rotate3d 15s infinite linear',
                        'text-gradient': 'textGradient 4s linear infinite',
                        'ripple': 'ripple 1.2s ease-out infinite'
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-20px)' },
                        },
                        wave: {
                            '0%': { transform: 'translateX(0)' },
                            '100%': { transform: 'translateX(-100%)' },
                        },
                        fadeIn: {
                            '0%': { opacity: 0 },
                            '100%': { opacity: 1 },
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(30px)', opacity: 0 },
                            '100%': { transform: 'translateY(0)', opacity: 1 },
                        },
                        slideRight: {
                            '0%': { transform: 'translateX(-30px)', opacity: 0 },
                            '100%': { transform: 'translateX(0)', opacity: 1 },
                        },
                        slideLeft: {
                            '0%': { transform: 'translateX(30px)', opacity: 0 },
                            '100%': { transform: 'translateX(0)', opacity: 1 },
                        },
                        scaleIn: {
                            '0%': { transform: 'scale(0.8)', opacity: 0 },
                            '100%': { transform: 'scale(1)', opacity: 1 },
                        },
                        rotate3d: {
                            '0%': { transform: 'rotateY(0deg)' },
                            '100%': { transform: 'rotateY(360deg)' },
                        },
                        textGradient: {
                            '0%, 100%': { 'background-position': '0% 50%' },
                            '50%': { 'background-position': '100% 50%' }
                        },
                        ripple: {
                            '0%': { width: '0', height: '0', opacity: '0.5' },
                            '100%': { width: '500px', height: '500px', opacity: '0' }
                        }
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
    @layer utilities {
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .modal-enter {
            opacity: 0;
            transform: scale(0.95);
        }
        .modal-enter-active {
            opacity: 1;
            transform: scale(1);
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .backdrop-blur-md {
            backdrop-filter: blur(8px);
        }
        #back-to-top {
            transition: all 0.3s ease;
        }
        #back-to-top:hover {
            transform: translateY(-3px);
        }
        .journal-transition {
            transition: opacity 0.3s ease, filter 0.4s ease;
        }
        .journal-fade-out {
            opacity: 0;
            filter: blur(5px);
        }
        .journal-fade-in {
            opacity: 1;
            filter: blur(0);
        }
        .collapse-transition {
            transition: max-height 0.7s ease, opacity 0.5s ease;
            overflow: hidden;
            max-height: 0;
            opacity: 0;
        }
        .collapse-open {
            max-height: 2000px;
            opacity: 1;
        }
        .backdrop-blur-sm {
            backdrop-filter: blur(4px);
        }
        .max-h-5000 {
            max-height: 5000px;
        }
        .nav-indicator {
            position: absolute;
            pointer-events: none;
            background-color: rgba(22, 93, 255, 0.2);
            backdrop-filter: blur(8px);
            border-radius: 999px;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 5;
        }
        .image-zoom {
            transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                        box-shadow 0.5s ease, 
                        filter 0.5s ease;
            cursor: zoom-in;
            position: relative;
            overflow: hidden;
            transform-origin: center;
            filter: brightness(0.95);
            border-radius: 0.5rem;
            transform: perspective(1000px) rotateX(0) rotateY(0) scale(1);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .image-zoom:hover {
            transform: perspective(1000px) rotateX(2deg) rotateY(2deg) scale(1.05);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            filter: brightness(1.05);
            z-index: 10;
        }
        .image-zoom::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, transparent 30%, rgba(0, 0, 0, 0.3) 100%);
            opacity: 0;
            transition: opacity 0.5s ease;
            z-index: 1;
            pointer-events: none;
        }
        .image-zoom:hover::before {
            opacity: 0.8;
        }
        .image-zoom::after {
            content: '点击查看大图';
            position: absolute;
            bottom: 10px;
            left: 0;
            right: 0;
            text-align: center;
            color: white;
            font-size: 12px;
            padding: 4px;
            background: rgba(0, 0, 0, 0.5);
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.3s ease;
            z-index: 2;
        }
        .image-zoom:hover::after {
            opacity: 1;
            transform: translateY(0);
        }
        .image-modal {
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(12px);
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
        }
        .image-modal.active {
            opacity: 1;
            pointer-events: auto;
        }
        .image-modal-content {
            max-width: 90%;
            max-height: 90%;
            transform: scale(0.8);
            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                        opacity 0.4s ease;
            opacity: 0;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            border-radius: 8px;
            overflow: hidden;
        }
        .image-modal.active .image-modal-content {
            transform: scale(1);
            opacity: 1;
        }
        .image-modal-close {
            position: absolute;
            top: 25px;
            right: 25px;
            color: white;
            font-size: 30px;
            cursor: pointer;
            z-index: 1001;
            background: rgba(255, 255, 255, 0.15);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            backdrop-filter: blur(4px);
        }
        .image-modal-close:hover {
            transform: rotate(90deg) scale(1.1);
            background: rgba(255, 255, 255, 0.25);
        }
        .image-modal-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
            color: white;
            padding: 15px;
            background: rgba(0, 0, 0, 0.7);
            font-size: 18px;
            transform: translateY(100%);
            transition: transform 0.4s ease 0.2s;
            backdrop-filter: blur(4px);
        }
        .image-modal.active .image-modal-caption {
            transform: translateY(0);
        }
        .animated-bg {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
            overflow: hidden;
        }
        .floating-element {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(22,93,255,0.15) 0%, rgba(22,93,255,0) 70%);
            filter: blur(20px);
        }
        .wave-pattern {
            position: absolute;
            width: 200%;
            height: 100%;
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 C20 0, 40 20, 60 10 S100 0,100 10' stroke='%23165DFF' stroke-width='0.5' fill='none' opacity='0.1'/%3E%3C/svg%3E");
            background-repeat: repeat-x;
            background-position: 0 bottom;
            background-size: 100px 20px;
        }
        .animated-border {
            position: relative;
        }
        .animated-border::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, #165DFF, #FF6B00);
            transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .animated-border:hover::after {
            width: 100%;
        }
        .glow-hover {
            transition: box-shadow 0.4s ease;
        }
        .glow-hover:hover {
            box-shadow: 0 0 20px rgba(22, 93, 255, 0.4);
        }
        .text-gradient {
            background: linear-gradient(90deg, #165DFF, #FF6B00);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            background-size: 200% 100%;
            animation: textGradient 4s linear infinite;
        }
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }
        .animate-on-scroll.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .team-card {
            transition: transform 0.5s ease, box-shadow 0.5s ease;
            position: relative;
            overflow: hidden;
            perspective: 1000px;
        }
        .team-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }
        .team-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.8s;
            transform-style: preserve-3d;
        }
        .team-card:hover .team-card-inner {
            transform: rotateY(180deg);
        }
        .team-card-front, .team-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            border-radius: 0.75rem;
            overflow: hidden;
        }
        .team-card-back {
            transform: rotateY(180deg);
            background: linear-gradient(135deg, #165DFF, #0D9488);
            color: white;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .team-card .bg-primary\/10 {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .team-card:hover .bg-primary\/10 {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .blur-card {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            border-radius: 0.75rem;
            overflow: hidden;
        }
        .blur-section {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(8px);
            border-radius: 0.75rem;
            overflow: hidden;
        }
        .enhanced-blur {
            backdrop-filter: blur(15px);
            background: rgba(255, 255, 255, 0.8);
        }
        .ripple {
            position: relative;
            overflow: hidden;
        }
        .ripple::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            z-index: 0;
        }
        .ripple:hover::after {
            animation: ripple 1.2s ease-out;
        }
        .nav-item {
            position: relative;
            padding-bottom: 5px;
        }
        .nav-item::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #165DFF, #FF6B00);
            transition: width 0.4s ease;
        }
        .nav-item:hover::after {
            width: 100%;
        }
        .journal-nav {
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            overflow: hidden;
        }
        .journal-nav::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, #165DFF, #FF6B00);
            z-index: -1;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }
        .journal-nav:hover::before {
            transform: translateY(0);
        }
        .journal-nav:hover {
            color: white;
        }
        .timeline-item {
            position: relative;
            padding: 1.5rem;
            border-radius: 0.75rem;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(5px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            transition: all 0.4s ease;
        }
        .timeline-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        .loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #165DFF, #0D9488);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.8s, visibility 0.8s;
        }
        .loader-logo {
            font-size: 3rem;
            color: white;
            margin-bottom: 2rem;
            animation: float 3s ease-in-out infinite;
        }
        .loader-bar {
            width: 300px;
            height: 6px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
            overflow: hidden;
        }
        .loader-progress {
            height: 100%;
            width: 0%;
            background: white;
            border-radius: 3px;
            animation: loading 2s ease-in-out forwards;
        }
        @keyframes loading {
            0% { width: 0%; }
            100% { width: 100%; }
        }
    }
</style>
</head>
<body class="font-inter bg-light text-dark">
    <div id="loader" class="loader">
        <div class="loader-logo">
            <i class="fa fa-car"></i>
        </div>
        <div class="text-white text-2xl font-bold mb-4">电子卡丁车开发日志</div>
        <div class="loader-bar">
            <div class="loader-progress"></div>
        </div>
    </div>

    <div class="animated-bg">
        <div class="floating-element animation-float animation-delay-100" style="width: 300px; height: 300px; top: 10%; left: 5%; animation-delay: 0s;"></div>
        <div class="floating-element animation-float animation-delay-300" style="width: 200px; height: 200px; top: 70%; left: 80%; animation-delay: 1.5s;"></div>
        <div class="floating-element animation-float animation-delay-500" style="width: 150px; height: 150px; top: 40%; left: 70%; animation-delay: 2.5s;"></div>
        <div class="floating-element animation-float animation-delay-700" style="width: 250px; height: 250px; top: 20%; left: 50%; animation-delay: 3.5s;"></div>
        <div class="wave-pattern animation-wave"></div>
    </div>
    
    <div class="image-modal" id="image-modal">
        <div class="image-modal-close" id="image-modal-close">
            <i class="fa fa-times"></i>
        </div>
        <img class="image-modal-content" id="zoomed-image" src="" alt="放大图片">
        <div class="image-modal-caption" id="image-caption"></div>
    </div>
    
    <nav id="navbar" class="fixed w-full z-50 bg-white/90 backdrop-blur-sm shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <i class="fa fa-car text-primary text-2xl mr-2 animate-spin-slow"></i>
                <span class="text-xl font-bold text-gradient font-heading">电子卡丁车开发日志</span>
            </div>
            <div class="hidden md:flex space-x-8">
                <a href="#home" class="nav-item text-dark hover:text-primary transition-colors">首页</a>
                <a href="#team" class="nav-item text-dark hover:text-primary transition-colors">团队成员</a>
                <a href="#journal" class="nav-item text-dark hover:text-primary transition-colors">实习日志</a>
                <a href="#summary" class="nav-item text-dark hover:text-primary transition-colors">项目总结</a>
            </div>
            <button id="mobile-menu-btn" class="md:hidden text-dark animate-pulse-slow">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
        <div id="mobile-menu" class="md:hidden hidden bg-white shadow-md absolute w-full">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
                <a href="#home" class="py-2 hover:text-primary transition-colors nav-item">首页</a>
                <a href="#team" class="py-2 hover:text-primary transition-colors nav-item">团队成员</a>
                <a href="#journal" class="py-2 hover:text-primary transition-colors nav-item">实习日志</a>
                <a href="#summary" class="py-2 hover:text-primary transition-colors nav-item">项目总结</a>
            </div>
        </div>
    </nav>

    <section id="home" class="relative h-screen flex items-center overflow-hidden">
        <div class="absolute inset-0 z-0">
            <img src="https://images.hdqwalls.com/download/xiaomi-su7-ultra-prototype-hl-3840x2160.jpg" alt="电子卡丁车" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-b from-dark/80 to-primary/40"></div>
        </div>
        <div class="container mx-auto px-4 relative z-10 text-white">
            <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold mb-6 leading-tight animate-slide-up font-heading">
                电子卡丁车自主开发<br>实习日志
            </h1>
            <p class="text-xl mb-8 max-w-2xl animate-slide-up animate-delay-200">
                记录十四天从三电系统开发到整车架构组装的完整过程
            </p>
            <div class="flex flex-wrap gap-4">
                <a href="#team" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg transition-all transform hover:scale-105 animate-slide-right animate-delay-400 glow-hover ripple">
                    <span class="flex items-center">
                        <i class="fa fa-users mr-2 animate-bounce-slow"></i>
                        认识团队
                    </span>
                </a>
                <a href="#journal" class="bg-white/10 hover:bg-white/20 text-white border border-white/30 px-6 py-3 rounded-lg transition-all transform hover:scale-105 animate-slide-left animate-delay-600 glow-hover ripple">
                    <span class="flex items-center">
                        <i class="fa fa-book mr-2 animate-pulse-slow"></i>
                        查看日志
                    </span>
                </a>
            </div>
        </div>
        
        <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce-slow">
            <a href="#team" class="text-white text-3xl">
                <i class="fa fa-chevron-down"></i>
            </a>
        </div>
    </section>

    <section id="team" class="py-20 bg-white relative">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16 animate-on-scroll">
                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">团队成员</h2>
                <div class="w-20 h-1 bg-primary mx-auto mb-6 animate-scale-in"></div>
                <p class="text-gray-600 max-w-2xl mx-auto">
                    五名来自不同专业的成员，共同完成电子卡丁车的开发项目
                </p>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6">
                <div class="team-card card-hover bg-white rounded-xl shadow-md overflow-hidden cursor-pointer animate-on-scroll blur-card" data-id="1">
                    <div class="relative">
                        <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/50 z-10"></div>
                        <img src="https://s21.ax1x.com/2025/07/17/pV3QSTs.jpg" alt="兰云皓" class="w-full h-64 object-cover">
                        <div class="absolute inset-0 bg-primary/70 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center z-20">
                            <button class="view-details bg-white text-primary px-4 py-2 rounded-lg transform translate-y-4 hover:translate-y-0 transition-all">
                                查看详情
                            </button>
                        </div>
                    </div>
                    <div class="p-6 relative z-30 bg-white">
                        <h3 class="text-xl font-bold mb-1">兰云皓</h3>
                        <p class="text-primary">项目负责人&电池开发</p>
                        <div class="mt-3 flex space-x-2">
                            <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded-full">项目管理</span>
                            <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded-full">电池系统</span>
                            <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded-full">整车架构设计</span>
                        </div>
                    </div>
                </div>

                <div class="team-card card-hover bg-white rounded-xl shadow-md overflow-hidden cursor-pointer animate-on-scroll blur-card" data-id="2" style="animation-delay: 0.1s">
                    <div class="relative">
                        <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/50 z-10"></div>
                        <img src="https://s21.ax1x.com/2025/07/17/pV3MxmQ.jpg" alt="章渝忠" class="w-full h-64 object-cover">
                        <div class="absolute inset-0 bg-primary/70 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center z-20">
                            <button class="view-details bg-white text-primary px-4 py-2 rounded-lg transform translate-y-4 hover:translate-y-0 transition-all">
                                查看详情
                            </button>
                        </div>
                    </div>
                    <div class="p-6 relative z-30 bg-white">
                        <h3 class="text-xl font-bold mb-1">章渝忠</h3>
                        <p class="text-primary">电驱设计</p>
                        <div class="mt-3 flex space-x-2">
                            <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded-full">电机驱动</span>
                            <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded-full">动力系统</span>
                        </div>
                    </div>
                </div>

                <div class="team-card card-hover bg-white rounded-xl shadow-md overflow-hidden cursor-pointer animate-on-scroll blur-card" data-id="3" style="animation-delay: 0.2s">
                    <div class="relative">
                        <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/50 z-10"></div>
                        <img src="https://s21.ax1x.com/2025/07/17/pV3MjOg.jpg" alt="潘昱昇" class="w-full h-64 object-cover">
                        <div class="absolute inset-0 bg-primary/70 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center z-20">
                            <button class="view-details bg-white text-primary px-4 py-2 rounded-lg transform translate-y-4 hover:translate-y-0 transition-all">
                                查看详情
                            </button>
                        </div>
                    </div>
                    <div class="p-6 relative z-30 bg-white">
                        <h3 class="text-xl font-bold mb-1">潘昱昇</h3>
                        <p class="text-primary">电池开发</p>
                        <div class="mt-3 flex space-x-2">
                            <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded-full">电池管理</span>
                            <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded-full">电路设计</span>
                            <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded-full">整车架构设计</span>
                        </div>
                    </div>
                </div>

                <div class="team-card card-hover bg-white rounded-xl shadow-md overflow-hidden cursor-pointer animate-on-scroll blur-card" data-id="4" style="animation-delay: 0.3s">
                    <div class="relative">
                        <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/50 z-10"></div>
                        <img src="https://s21.ax1x.com/2025/07/17/pV3Mzwj.jpg" alt="李孟林" class="w-full h-64 object-cover">
                        <div class="absolute inset-0 bg-primary/70 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center z-20">
                            <button class="view-details bg-white text-primary px-4 py-2 rounded-lg transform translate-y-4 hover:translate-y-0 transition-all">
                                查看详情
                            </button>
                        </div>
                    </div>
                    <div class="p-6 relative z-30 bg-white">
                        <h3 class="text-xl font-bold mb-1">李孟林</h3>
                        <p class="text-primary">电控设计</p>
                        <div class="mt-3 flex space-x-2">
                            <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded-full">嵌入式</span>
                            <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded-full">控制系统</span>
                        </div>
                    </div>
                </div>

                <div class="team-card card-hover bg-white rounded-xl shadow-md overflow-hidden cursor-pointer animate-on-scroll blur-card" data-id="5" style="animation-delay: 0.4s">
                    <div class="relative">
                        <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/50 z-10"></div>
                        <img src="https://s21.ax1x.com/2025/07/17/pV3MX6S.jpg" alt="何欣隆" class="w-full h-64 object-cover">
                        <div class="absolute inset-0 bg-primary/70 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center z-20">
                            <button class="view-details bg-white text-primary px-4 py-2 rounded-lg transform translate-y-4 hover:translate-y-0 transition-all">
                                查看详情
                            </button>
                        </div>
                    </div>
                    <div class="p-6 relative z-30 bg-white">
                        <h3 class="text-xl font-bold mb-1">何欣隆</h3>
                        <p class="text-primary">电控设计</p>
                        <div class="mt-3 flex space-x-2">
                            <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded-full">日志文本撰写</span>
                            <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded-full">3D建模打印</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="journal" class="py-20 bg-gray-50 relative">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16 animate-on-scroll">
                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 font-heading">实习日志</h2>
                <div class="w-20 h-1 bg-primary mx-auto mb-6 animate-scale-in"></div>
                <p class="text-gray-600 max-w-2xl mx-auto">
                    十四天开发过程的详细记录，点击日期切换查看
                </p>
            </div>

            <div class="relative flex flex-wrap justify-center gap-3 mb-12 animate-on-scroll">
                <button class="journal-nav bg-primary text-white px-5 py-2 rounded-full transform hover:scale-105 transition-all" data-day="1">Day 1</button>
                <div class="nav-indicator" id="navIndicator"></div>
                <button class="journal-nav bg-white text-primary hover:bg-primary/10 px-5 py-2 rounded-full transition-all transform hover:scale-105" data-day="2">Day 2</button>
                <button class="journal-nav bg-white text-primary hover:bg-primary/10 px-5 py-2 rounded-full transition-all transform hover:scale-105" data-day="3">Day 3</button>
                <button class="journal-nav bg-white text-primary hover:bg-primary/10 px-5 py-2 rounded-full transition-all transform hover:scale-105" data-day="4">Day 4</button>
                <button class="journal-nav bg-white text-primary hover:bg-primary/10 px-5 py-2 rounded-full transition-all transform hover:scale-105" data-day="5">Day 5</button>
                <button class="journal-nav bg-white text-primary hover:bg-primary/10 px-5 py-2 rounded-full transition-all transform hover:scale-105" data-day="6">Day 6</button>
                <button class="journal-nav bg-white text-primary hover:bg-primary/10 px-5 py-2 rounded-full transition-all transform hover:scale-105" data-day="7">Day 7</button>
                <button class="journal-nav bg-white text-primary hover:bg-primary/10 px-5 py-2 rounded-full transition-all transform hover:scale-105" data-day="8">Day 8</button>
                <button class="journal-nav bg-white text-primary hover:bg-primary/10 px-5 py-2 rounded-full transition-all transform hover:scale-105" data-day="9">Day 9</button>
                <button class="journal-nav bg-white text-primary hover:bg-primary/10 px-5 py-2 rounded-full transition-all transform hover:scale-105" data-day="10">Day 10</button>
                <button class="journal-nav bg-white text-primary hover:bg-primary/10 px-5 py-2 rounded-full transition-all transform hover:scale-105" data-day="11">Day 11</button>
                <button class="journal-nav bg-white text-primary hover:bg-primary/10 px-5 py-2 rounded-full transition-all transform hover:scale-105" data-day="12">Day 12</button>
                <button class="journal-nav bg-white text-primary hover:bg-primary/10 px-5 py-2 rounded-full transition-all transform hover:scale-105" data-day="13">Day 13</button>
                <button class="journal-nav bg-white text-primary hover:bg-primary/10 px-5 py-2 rounded-full transition-all transform hover:scale-105" data-day="14">Day 14</button>
            </div>

            <div class="journal-content max-w-4xl mx-auto animate-on-scroll">
                <div class="journal-entry active bg-white rounded-xl shadow-lg p-6 md:p-8 journal-transition blur-section" data-day="1">
                    <h3 class="text-2xl font-bold mb-2">项目启动与安全讲座</h3>
                    <p class="text-gray-500 mb-6">第一天（7月5日）</p>
                    <p class="mb-4">今天是项目启动的第一天，团队成员首次正式会面，明确了项目目标和整体计划。学院的老师为我们讲解了实习的各方面注意事项。我们的电子卡丁车开发分为两个主要阶段：前七天完成三点系统（电驱系统、电控系统、电池系统）的开发，后七天进行整车架构组装与调试。</p>
                    <p class="mb-4">下午进行了任务分配，确定了每个人的职责范围。</p>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
                        <img src="https://s21.ax1x.com/2025/07/14/pV1P0oQ.jpg" alt="项目启动会议" class="w-full h-48 object-cover rounded-lg image-zoom">
                    </div>
                    
                    <div class="flex justify-center mt-6">
                        <button class="reflect-btn bg-secondary/10 hover:bg-secondary/20 text-secondary px-6 py-3 rounded-lg transition-all flex items-center gap-2 glow-hover ripple">
                            <i class="fa fa-lightbulb-o animate-pulse-slow"></i>
                            <span>查看总结与反思</span>
                        </button>
                    </div>
                </div>

                <div class="journal-entry hidden bg-white rounded-xl shadow-lg p-6 md:p-8 journal-transition blur-section" data-day="2">
                    <h3 class="text-2xl font-bold mb-2">整车方案设计</h3>
                    <p class="text-gray-500 mb-6">第二天（7月6日）</p>
                    <p class="mb-4">清晨九点左右，我们搭乘大巴启程前往峨眉校区，午后便马不停蹄地展开实地走访调研。本次调研旨在通过沉浸式体验建立对校园生活的同理心，精准定义师生日常出行中的真实问题...</p>
                    
                    <div class="more-details overflow-hidden max-h-56 opacity-100 transition-all duration-1000 ease-in-out">
                        <p class="mb-4">走访过程中，我们先后实地考察了 6201 教室、院士楼、电机馆、行政楼、操场、名山电影场、风雨操场、200 米铁轨、图书馆及生活超市，逐一明确了各地点的具体方位。调研期间，我们针对性采访了三位不同身份的校园成员，聚焦出行方式相关问题展开深入交流；同时细致观察并记录了各区域的人流量、通行交通工具类型、行人行进速度、途中遇到的障碍及人们的面部表情等细节。加之数小时徒步快速穿梭校园的亲身体验，我们对师生群体在电动车使用方面的实际需求形成了深刻认知。
                        从采访中了解到，峨眉校区因地处山区，频繁出现的陡坡与长阶梯给日常出行带来显著困扰：自行车在此类地形中安全性欠佳，电动车则面临跨越地形的实际难题，尤其在雨天，路面打滑等问题更为突出。
                        实地走访结束后，各组间开展了心得分享会，充分交换调研信息与思考成果。其中部分小组还得到学校院士的亲切接待，就电动车相关专业知识进行了深入交流。
                        当晚，在老师的指导下，我们完成了本组 gitee 仓库的创建，为后续实习工作搭建了基础平台；同时制作了专属网站，用于介绍团队情况及记录实习全过程。</p>
                        <p class="mb-4">今天重点讨论了动力系统的设计方案。经过比较直流电机、交流电机和无刷电机的优缺点，我们最终选择了有刷刷直流电机作为驱动方案，因为它具有高效率、长寿命和良好的调速性能。团队完成了电机参数的计算和选型，初步确定电压12V的方案。同时，我们也开始研究电池组的配置，计划采用21700锂电池组成12V的电池组。</p>
                    
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
                            <img src="https://s21.ax1x.com/2025/07/08/pVQpe2T.jpg" alt="合照" class="w-full h-72 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/08/pVQpZGV.jpg" alt="峨眉校区风景" class="w-full h-72 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/08/pVQpuMF.jpg" alt="峨眉校区风景" class="w-full h-72 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/08/pVQpmxU.jpg" alt="峨眉校区风景" class="w-full h-72 object-cover rounded-lg image-zoom">
                        </div>
                    </div>
                    
                    <div class="expand-trigger flex justify-center items-center mt-4 cursor-pointer group">
                        <div class="w-12 h-12 rounded-full bg-primary/10 backdrop-blur-sm flex items-center justify-center transition-all duration-300 group-hover:bg-primary/20 animate-pulse-slow">
                            <i class="fa fa-chevron-down text-primary text-xl transition-transform duration-700 transform"></i>
                        </div>
                    </div>
                    
                    <div class="flex justify-center mt-6">
                        <button class="reflect-btn bg-secondary/10 hover:bg-secondary/20 text-secondary px-6 py-3 rounded-lg transition-all flex items-center gap-2 glow-hover ripple">
                            <i class="fa fa-lightbulb-o animate-pulse-slow"></i>
                            <span>查看总结与反思</span>
                        </button>
                    </div>
                </div>
               <div class="journal-entry hidden bg-white rounded-xl shadow-lg p-6 md:p-8 journal-transition blur-section" data-day="3">
                    <h3 class="text-2xl font-bold mb-2">三电系统原理了解</h3>
                    <p class="text-gray-500 mb-6">第三天（7月7日）</p>
                    <p class="mb-4">上午，我们领取了制作电车所需要的物料，以及对相关物料的基础理论了解。下午，我们组制作了单节锂电池充电器的制作，及使用直流电源驱动电机正反转。</p>
                    
                    <div class="more-details overflow-hidden max-h-56 opacity-100 transition-all duration-1000 ease-in-out">
                        <p class="mb-4">附加电池原理，电池我们将采用三串两并的结构，因为一块电池提供大约4V的电压，那么三节串联起来就可以提供12V的电压，在并联就可以使电流加倍来提供稳定的动力，连接保护板时则从负极（B-）开始连接。</p>
                        <p class="mb-4">电池组：制作了两个单节21700电芯的充电器，并对保护板，INA219有了一定的了解。</p>
                        <p class="mb-4">电驱组：早上听老师讲解ppt，我们了解了电控的工作原理，然后老师给我们介绍了搭建电控系统的各个操作步骤，我们仔细地聆听然后下来认真看了课件附上的链接里的视频和文件，了解了电控系统的大概搭建过程。理论学习后，我们开始搭建开发环境。首先下载安装了Arduino IDE集成开发环境，并根据开发板型号安装了对应的支持包。在配置过程中，我们学习了驱动安装、端口选择等实用技巧。为验证环境配置，我们参考官方文档编写了Blink测试程序，然后连接线路进行测试，最后完成了测试。</p>
                        <p class="mb-4">电控组：早上听老师讲解ppt，了解了电控的每一部分应该做一些什么事情，然后我们开始下载Arduino IDE并安装支持包，借助网上的资料，写了Blink测试的代码，然后连接线路，完成测试。</p>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
                            <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.i_srMnzBlgVzFQeKXSK2yQHaFV?w=208&h=180&c=7&r=0&o=5&dpr=2&pid=1.7" alt="电路原理图" class="w-full h-72 object-cover rounded-lg image-zoom">
                            <img src="https://ts1.tc.mm.bing.net/th/id/R-C.141b4a47241d904de94daaf5199fcbce?rik=SKrV6OVmg%2faJbg&riu=http%3a%2f%2fcbu01.alicdn.com%2fimg%2fibank%2f2020%2f984%2f188%2f20328881489_1480940240.jpg&ehk=qv5O6GGLVb9IUViyeIEj6V1ZklFO%2b5A7VWue1jQondI%3d&risl=&pid=ImgRaw&r=0" alt="元件选型表" class="w-full h-72 object-cover rounded-lg image-zoom">
                        </div>
                    </div>
                    
                    <div class="expand-trigger flex justify-center items-center mt-4 cursor-pointer group">
                        <div class="w-12 h-12 rounded-full bg-primary/10 backdrop-blur-sm flex items-center justify-center transition-all duration-300 group-hover:bg-primary/20 animate-pulse-slow">
                            <i class="fa fa-chevron-down text-primary text-xl transition-transform duration-700 transform"></i>
                        </div>
                    </div>
                    
                    <div class="flex justify-center mt-6">
                        <button class="reflect-btn bg-secondary/10 hover:bg-secondary/20 text-secondary px-6 py-3 rounded-lg transition-all flex items-center gap-2 glow-hover ripple">
                            <i class="fa fa-lightbulb-o animate-pulse-slow"></i>
                            <span>查看总结与反思</span>
                        </button>
                    </div>
                </div>
                <div class="journal-entry hidden bg-white rounded-xl shadow-lg p-6 md:p-8 journal-transition blur-section" data-day="4">
                    <h3 class="text-2xl font-bold mb-2">三电系统各自初步开发</h3>
                    <p class="text-gray-500 mb-6">第四天（7月8日）</p>
                    <p class="mb-4">完成了六节电池的组装以及电池组的点焊，完成了连线任务与代码的编写，使得OLED可以显示出各种信息。</p>
                    
                    <div class="more-details overflow-hidden max-h-56 opacity-100 transition-all duration-1000 ease-in-out">
                        <p class="mb-4">电池组：完成了六节电芯的组装，用点焊连接了六节电芯和保护板，并使用12V充电器对电池组进行充电。</p>
                        <p class="mb-4">电驱组：上午：继续昨天的连线任务，理论上认为合理，使用嘉立创绘制了电路图.下午：编写代码，并根据电路图将开发板、电机驱动和驱动电机连接在一起，进行了驱动尝试，取得了一定的成功。</p>
                        <p class="mb-4">电驱组：上午借助网上的资料，写了代码并连接了线路，完成了OLED测试和电位器测试，OLED屏幕能显示出内容，电位器也能调节档位，并将油门剥线了接线。下午将油门、OLED、电位器接在一起进行测试，OLED屏幕能显示油门、电位器的工作状态，完成测试。</p>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
                            <img src="https://s21.ax1x.com/2025/07/08/pVMzbt0.jpg" alt="电机驱动" class="w-full h-72 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/08/pVMzX1U.png" alt="部分代码截图" class="w-full h-72 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/08/pVMzHkq.jpg" alt="电池组拼接" class="w-full h-72 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/08/pVMzqhV.jpg" alt="OLED与油门驱动" class="w-full h-72 object-cover rounded-lg image-zoom">
                        </div>
                    </div>
                    
                    <div class="expand-trigger flex justify-center items-center mt-4 cursor-pointer group">
                        <div class="w-12 h-12 rounded-full bg-primary/10 backdrop-blur-sm flex items-center justify-center transition-all duration-300 group-hover:bg-primary/20 animate-pulse-slow">
                            <i class="fa fa-chevron-down text-primary text-xl transition-transform duration-700 transform"></i>
                        </div>
                    </div>
                    
                    <div class="flex justify-center mt-6">
                        <button class="reflect-btn bg-secondary/10 hover:bg-secondary/20 text-secondary px-6 py-3 rounded-lg transition-all flex items-center gap-2 glow-hover ripple">
                            <i class="fa fa-lightbulb-o animate-pulse-slow"></i>
                            <span>查看总结与反思</span>
                        </button>
                    </div>
                </div>

                <div class="journal-entry hidden bg-white rounded-xl shadow-lg p-6 md:p-8 journal-transition blur-section" data-day="5">
                    <h3 class="text-2xl font-bold mb-2">各系统深入开发与三电系统初步整合</h3>
                    <p class="text-gray-500 mb-6">第五天（7月9日）</p>
                    <p class="mb-4">今日，项目研发工作取得阶段性重要进展，其中电驱系统与电控系统的初步结合尤为关键，这一突破不仅标志着两大核心模块的协同工作迈出了实质性一步，更为后续整体系统的联调与优化筑牢了基础。</p>
                    
                    <div class="more-details overflow-hidden max-h-56 opacity-100 transition-all duration-1000 ease-in-out">
                        <p class="mb-4">电池组工作进展</p>  
                        <p class="mb-4">今日，电池组相关工作按计划高效推进，为系统稳定运行提供了坚实的能源保障。为确保供电可靠性，项目专门安排经验丰富的人员驻守一楼充电区，严格遵循电池充放电规范开展充电管理，实时监测电池温度、电压等关键指标，避免过充过放，确保电池组始终处于最佳工作状态。  
                        与此同时，团队通过远程协作模式，顺利完成电池开关的焊接作业，并随即开展全面测试，包括导通性检测与耐压试验，结果均符合预设标准。此外，3.3V DC-DC稳压模块的调试工作圆满完成，实测输出电压稳定，纹波系数低，可充分满足后续低功耗器件的供电需求。  
                        由Esp32与INA219组成的测量系统调试也取得突破性进展。经过反复校准与优化，该系统已能精准采集电压与电流数据，数据精度与稳定性均达到设计要求，为后续系统能耗分析、能源管理策略优化提供了可靠的数据支撑。  
                        </p>

                        <p class="mb-4">电驱组工作进展  
                        <p class="mb-4">电驱团队今日聚焦核心功能调试，在与电控团队的协同配合中实现关键突破。上午，团队技术人员详细梳理了驱动模块的核心功能与设计思路，重点向电控团队阐述了电驱系统的功率输出特性、马达驱动逻辑及硬件保护机制，包括器件工作原理、信号传输路径及负载响应特性等关键细节，为双方技术衔接奠定了清晰的认知基础。  
                        基于与电控团队达成的技术共识，电驱团队迅速投入到系统联调中，针对油门控制、转速调节等核心功能开展测试。通过实时监测电路波形、优化驱动参数，确保马达在接收电控信号后能精准响应：踩下油门踏板时，马达可按比例输出对应扭矩；调节电位器时，转速能实现平滑变化，无明显波动。截至下午，电驱系统各项硬件性能指标均达到预期，为与电控系统的深度融合提供了可靠的硬件支撑。  
                        </p>

                        <p class="mb-4">电控组工作进展  
                        <p class="mb-4">电控团队今日以系统控制逻辑实现为核心，通过跨团队协作推动电控功能落地。上午，团队与电驱团队开展深入技术交流，明确了控制代码的编写规范、接口协议及数据交互逻辑，重点梳理了控制算法的架构设计、参数阈值及信号处理流程，确保软件逻辑与硬件特性高度匹配。  
                        随后，电控团队基于共识开展控制代码的编写与调试，同步优化信号采集、指令输出及参数显示等模块。通过逐行调试代码逻辑、迭代优化算法，成功实现了对电驱系统的精准控制：一方面，将油门踏板信号、电位器调节信号转化为稳定的控制指令，驱动马达按预期运行；另一方面，完成OLED显示屏的驱动逻辑开发，实现系统转速、电压、电流等关键参数的实时显示，数据更新及时、准确。  
                        截至当日工作结束，电控系统已实现与电驱系统的初步协同，控制响应速度与稳定性均达到设计目标，为后续全系统联调奠定了坚实的软件基础。
                        </p>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
                            <img src="https://s21.ax1x.com/2025/07/09/pVQKkd0.jpg" alt="认真工作（OWO）！！" class="w-full h-48 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/09/pVQKMLR.jpg" alt="OLED与电机联通" class="w-full h-48 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/09/pVQK1dx.jpg" alt="连接esp32" class="w-full h-48 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/09/pVQKle1.png" alt="部分代码截图" class="w-full h-48 object-cover rounded-lg image-zoom">
                        </div>
                    </div>
                    
                    <div class="expand-trigger flex justify-center items-center mt-4 cursor-pointer group">
                        <div class="w-12 h-12 rounded-full bg-primary/10 backdrop-blur-sm flex items-center justify-center transition-all duration-300 group-hover:bg-primary/20 animate-pulse-slow">
                            <i class="fa fa-chevron-down text-primary text-xl transition-transform duration-700 transform"></i>
                        </div>
                    </div>
                    
                    <div class="flex justify-center mt-6">
                        <button class="reflect-btn bg-secondary/10 hover:bg-secondary/20 text-secondary px-6 py-3 rounded-lg transition-all flex items-center gap-2 glow-hover ripple">
                            <i class="fa fa-lightbulb-o animate-pulse-slow"></i>
                            <span>查看总结与反思</span>
                        </button>
                    </div>
                </div>

                <div class="journal-entry hidden bg-white rounded-xl shadow-lg p-6 md:p-8 journal-transition blur-section" data-day="6">
                    <h3 class="text-2xl font-bold mb-2">PCB画图的学习与三电系统的整合</h3>
                    <p class="text-gray-500 mb-6">第六天（7月10日）</p>
                    <p class="mb-4">今日核心工作围绕三电系统整合展开：电池组完成稳压性能调试，电驱组绘制整车PCB电路，电控组优化OLED显示功能，最终实现三电系统协调工作，各模块数据正常交互。</p>
                    
                    <div class="more-details overflow-hidden max-h-56 opacity-100 transition-all duration-1000 ease-in-out">
                        <p class="mb-4">电池组：  
                        同学充分讨论电池焊接后的稳压性能调试方案，查阅课件及网页资料，借鉴老师和同学意见，编写控制电池稳压的相关代码。通过研究电池工作原理和内部结构，确定电路板与电池的正确连接方法，接通直流稳压源后用万用表测量，显示电压基本稳定，调试完成。</p>
                        
                        <p class="mb-4">电驱组：  
                        负责绘制小车三电系统（电池、电驱、电控）的PCB电路，获取另外两个系统的电路连接方法后，仔细研读并向相关同学确认关键连接部分。在软件中匹配项目所需元器件，根据整理结果绘制原理图，随后转到PCB设计，兼顾信号流向和散热需求，完成合理的手动布线。</p>
                        
                        <p class="mb-4">电控组：  
                        为实现OLED屏幕显示电池电压和电流，在征求电池组意见后修改相关代码，经多次调试，成功在OLED屏幕上新增电池电压、电流实时数据显示区域。</p>
                        
                        <p class="mb-4">系统整合：  
                        三组同学协作实现三电系统协调工作：电池组与电驱组先完成电路连接，验证电池为马达供电正常；再接入电控组线路，测试显示OLED屏幕可正常展示开关、油门、速度、电流和电压状态，调试完成。</p>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
                            <img src="https://s21.ax1x.com/2025/07/10/pVQ4GAH.png" alt="PCB布线图" class="w-full h-72 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/10/pVQ4Y4A.jpg" alt="三电联通实验" class="w-full h-72 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/10/pVQ4JNd.jpg" alt="电池组与电控组协调" class="w-full h-72 object-cover rounded-lg image-zoom">
                        </div>
                    </div>
                    
                    <div class="expand-trigger flex justify-center items-center mt-4 cursor-pointer group">
                        <div class="w-16 h-16 rounded-full bg-primary/10 backdrop-blur-md flex items-center justify-center transition-all duration-300 group-hover:bg-primary/20 animate-pulse-slow">
                            <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
                                <i class="fa fa-chevron-down text-sm transition-transform duration-700 transform"></i>
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-center mt-6">
                        <button class="reflect-btn bg-secondary/10 hover:bg-secondary/20 text-secondary px-6 py-3 rounded-lg transition-all flex items-center gap-2 glow-hover ripple">
                            <i class="fa fa-lightbulb-o animate-pulse-slow"></i>
                            <span>查看总结与反思</span>
                        </button>
                    </div>
                </div>

                 <div class="journal-entry hidden bg-white rounded-xl shadow-lg p-6 md:p-8 journal-transition blur-section" data-day="7">
                    <h3 class="text-2xl font-bold mb-2">优化与安全规范</h3>
                    <p class="text-gray-500 mb-6">第七天（7月11日）</p>
                    <p class="mb-4">今日的核心内容围绕着优化与安全规范展开：在上午聆听了挪威科技大学博士的讲解后，小组以电车系统为案例，开展了可靠性分析。
电车系统主要由驱动系统、控制系统、人机交互和能源系统构成。驱动系统负责为电车行驶提供动力，控制系统精确地控制电车的行驶状态，人机交互系统是用户和电车进行信息交流的窗口，能源系统为整个电车系统提供能源支持。
小组聚焦于人机交互模块，完成了完整的一页FMECA分析表以及整车系统功能图与FTA故障树分析图。该模块涵盖仪表显示、换挡操作，是保障行车安全的重要环节，因此，对其进行可靠性分析是十分重要的。
</p>
                    
                    <div class="more-details overflow-hidden max-h-56 opacity-100 transition-all duration-1000 ease-in-out">
                        <p class="mb-4">1.功能图绘制：
                        我们绘制了整车的系统功能图，包括能源模块，控制系统，动能系统，与人机交互系统。能源模块负责为电车提供动力，控制系统负责精确控制电车的行驶状态，动能系统负责驱动电车行驶，人机交互系统则是用户和电车进行信息交流的窗口。通过功能图，我们可以清晰地看到各个模块之间的关系和作用，为后续的可靠性分析奠定了基础。
                        </p>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
                            <img src="https://s21.ax1x.com/2025/07/11/pVlFEQ0.png" alt="能源系统" class="w-full h-72 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/11/pVlFZLT.png" alt="控制系统" class="w-full h-72 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/11/pVlFkzq.png" alt="人机交互系统" class="w-full h-72 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/11/pVlFFWn.png" alt="动力交互系统" class="w-full h-72 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/11/pVlFVyV.png" alt="整车系统" class="w-full h-96 object-cover rounded-lg image-zoom">
                        </div>
                        
                        <p class="mb-4">2.FMECA分析：
                        针对人机交互模块的故障模式分析，我们发现了几个典型的高风险问题。例如：
                        (1)通信系统数据传输的CAN总线丢包（>10%）,原因是线缆磨损或节点冲突，后果为控制指令丢失，电机响应延迟，存在严重的安全隐患。频率评分为6，严重性评分为7，可检测性评分为8，综合RPN为336；
                        (2)油门控制中，电位器漂移或油门粘连，原因可能是接线接触不良或者机械结构卡死，后果为速度控制失准，甚至紧急制动失效。虽然频率评分和可检测性评分较低（分别为2，1），但严重性评分达到了10，不可忽视。
                        其余风险问题详见小组FMECA分析表。
                        </p>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
                            <img src="https://s21.ax1x.com/2025/07/11/pVlFMFJ.png" alt="FMECA分析" class="w-full h-72 object-cover rounded-lg image-zoom">
                            
                        </div>
                        
                        <p class="mb-4">3.FTA故障树分析：
                        小组选取了"电机故障"作为顶层事件，构建故障树后发现
                        (1)中间事件包括"输入指令未被识别""指令传输中断""指令反馈异常"；
                        (2)基本事件涵括硬件（按钮、显示屏故障）、软件（算法bug、系统卡顿）、人因问题。
                        </p>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
                            <img src="https://s21.ax1x.com/2025/07/11/pVlF8Qx.png" alt="FTA故障树" class="w-full h-72 object-cover rounded-lg image-zoom">
                            
                        </div>
                    </div>
                    
                    <div class="expand-trigger flex justify-center items-center mt-4 cursor-pointer group">
                        <div class="w-16 h-16 rounded-full bg-primary/10 backdrop-blur-md flex items-center justify-center transition-all duration-300 group-hover:bg-primary/20 animate-pulse-slow">
                            <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
                                <i class="fa fa-chevron-down text-sm transition-transform duration-700 transform"></i>
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-center mt-6">
                        <button class="reflect-btn bg-secondary/10 hover:bg-secondary/20 text-secondary px-6 py-3 rounded-lg transition-all flex items-center gap-2 glow-hover ripple">
                            <i class="fa fa-lightbulb-o animate-pulse-slow"></i>
                            <span>查看总结与反思</span>
                        </button>
                    </div>
                </div>
                
                <div class="journal-entry hidden bg-white rounded-xl shadow-lg p-6 md:p-8 journal-transition blur-section" data-day="8">
                    <h3 class="text-2xl font-bold mb-2">整车架构设计与功能系统设计</h3>
                    <p class="text-gray-500 mb-6">第八天（7月12日）</p>
                    <p class="mb-4">今日核心工作围绕整车架构设计与功能系统设计展开：电池组，电控组，电驱组各自派出一个人完成了供能系统的整体设计，其他人则初步完成了整车架构设计，包括车体各方面数据的测算与估计，并且用3D建模软件完成了车体结构的可视化。</p>
                    
                    <div class="more-details overflow-hidden max-h-56 opacity-100 transition-all duration-1000 ease-in-out">
                        <p class="mb-4">今天我们将注意力集中在整车机械结构设计与3D建模实践。我们系统性地学习了车架设计核心要点：一是车架材料特性，重点对比了铝型材（轻量化、易加工）与方钢（高刚性）的适用场景，明确选用铝型材作为底盘主体，兼顾轻便性与承重需求；二是人机工程学参数设计，结合目标用户的需求，确定了座椅高度、轴距及方向盘倾角，确保驾驶舒适性。此外，通过Fusion 360入门教学，我们掌握了草图绘制、拉伸成形、打孔定位及虚拟装配等关键操作，为后续独立建模奠定基础。
设计实践阶段，小组基于方案C（前轮转向+后轮单电机驱动）展开建模。首先建立简化部件库：参照550电机尺寸及电池组模型，通过装配功能验证空间排布合理性，避免线束与转向机构干涉。车架主体采用铝型材搭建，通过"打孔"功能预设螺栓连接节点，并添加加强筋提升抗扭性；对于方向盘，我们先创建了其3D模型，准备通过3D打印机将其制造为实物，但是现有的3D打印机尺寸不满足我们的雪球，最后通过4次3D打印打印出四个部分，并使用热熔胶将其组装成最终的成品。我们随后输出了整车的3D模型，标注关键尺寸、材料及表面处理要求，为接下来的实物加工提供精确依据。</p>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
                            <img src="https://s21.ax1x.com/2025/07/13/pVlsQN6.jpg" alt="开心" class="w-full h-48 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/13/pVlsMAx.jpg" alt="联调数据" class="w-full h-48 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/13/pVlsuH1.jpg" alt="后驱" class="w-full h-48 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/13/pVlsl4K.png" alt="整车3D建模" class="w-full h-48 object-cover rounded-lg image-zoom">
                        </div>
                    </div>
                    
                    <div class="expand-trigger flex justify-center items-center mt-4 cursor-pointer group">
                        <div class="w-16 h-16 rounded-full bg-primary/10 backdrop-blur-md flex items-center justify-center transition-all duration-300 group-hover:bg-primary/20 animate-pulse-slow">
                            <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
                                <i class="fa fa-chevron-down text-sm transition-transform duration-700 transform"></i>
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-center mt-6">
                        <button class="reflect-btn bg-secondary/10 hover:bg-secondary/20 text-secondary px-6 py-3 rounded-lg transition-all flex items-center gap-2 glow-hover ripple">
                            <i class="fa fa-lightbulb-o animate-pulse-slow"></i>
                            <span>查看总结与反思</span>
                        </button>
                    </div>
                </div>

                <div class="journal-entry hidden bg-white rounded-xl shadow-lg p-6 md:p-8 journal-transition blur-section" data-day="9">
                    <h3 class="text-2xl font-bold mb-2">整车架构优化和铝材切割</h3>
                    <p class="text-gray-500 mb-6">第九天（7月13日）</p>
                    <p class="mb-4">今日核心工作围绕整车架构优化与铝材切割展开：上午我们精确地测量了整车的参数，并根据测量的参数优化整车架构，并根据这些数据改进我们的3D建模模型。下午我们根据测绘的数据图给铝材分段并进行切割，接着我们计划了整车拼接方案。</p>
                    
                    <div class="more-details overflow-hidden max-h-56 opacity-100 transition-all duration-1000 ease-in-out">
                        <p class="mb-4">今日，小组部分成员完成了3D打印方向盘的任务，首先，成员使用专业测量工具对车辆操纵杆的尺寸进行了严谨的测量，确保数据的准确性。随后，对采集的数据进行了多次核验，以避免后续建模阶段出现尺寸偏差。接着，成员检索了网络用户自主设计的方向盘案例，详细观察了成品的结构特点与细节处理，重点分析了实用性、人体工学设计及打印可行性，为后续建模提供参考依据。然后，基于测量数据与调研结果，成员集中讨论了方向盘模型的设计方案，包括外形轮廓、握持舒适度、安装适配性等关键要素。经综合评估后，最终确定了建模方案。随后，使用360 Fusion软件，成员严格按照方案逐步构建方向盘模型，过程中反复调整细节以确保精度。模型完成后，经组内交叉检查，确认无误后方进入打印阶段。在3D打印室中，成员根据设备要求调整参数并启动打印。通过合理安排时间与监控进度，最终顺利完成打印任务，获得方向盘实体成品。</p>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
                            <img src="https://s21.ax1x.com/2025/07/13/pVlImKP.jpg" alt="铝材测量" class="w-full h-48 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/13/pVlIZvt.jpg" alt="3D打印方向盘" class="w-full h-48 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/13/pVlInDf.png" alt="整车改进框架" class="w-full h-48 object-cover rounded-lg image-zoom">
                            
                        </div>
                    </div>
                    
                    <div class="expand-trigger flex justify-center items-center mt-4 cursor-pointer group">
                        <div class="w-16 h-16 rounded-full bg-primary/10 backdrop-blur-md flex items-center justify-center transition-all duration-300 group-hover:bg-primary/20 animate-pulse-slow">
                            <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
                                <i class="fa fa-chevron-down text-sm transition-transform duration-700 transform"></i>
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-center mt-6">
                        <button class="reflect-btn bg-secondary/10 hover:bg-secondary/20 text-secondary px-6 py-3 rounded-lg transition-all flex items-center gap-2 glow-hover ripple">
                            <i class="fa fa-lightbulb-o animate-pulse-slow"></i>
                            <span>查看总结与反思</span>
                        </button>
                    </div>
                </div>

                <div class="journal-entry hidden bg-white rounded-xl shadow-lg p-6 md:p-8 journal-transition blur-section" data-day="10">
                    <h3 class="text-2xl font-bold mb-2">整车架构初组装</h3>
                    <p class="text-gray-500 mb-6">第十天（7月14日）</p>
                    <p class="mb-4">今天上午，我们针对车架的架构进行了深入的讨论和重新设计。经过组员们的集思广益，我们决定对原有的车架结构进行优化调整，以提高整体的稳定性和安全性。新的框架结构在受力分布和材料利用率上有了显著改进，能够更好地支撑小车的运行需求。随后，我们根据设计图纸切割了新的铝材，为接下来的车架搭建做好了前期准备。</p>
                    
                    <div class="more-details overflow-hidden max-h-56 opacity-100 transition-all duration-1000 ease-in-out">
                        <p class="mb-4">下午，我们前往老师办公室，就车架的安全性和可行性问题与老师进行了详细探讨。在老师的指导下，我们对部分细节进行了调整，最终通过了方案审核，并领取了铝型材、支脚角码、螺丝、螺母等必要的搭建材料。回到工作区后，组员们仔细比量了切割好的铝材，对照设计图纸反复核对尺寸，确保每一部分的精度。随后，我们开始使用连接件进行车架的拼接，过程中不断调整和改进，最终成功完成了车架的初步搭建。</p>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
                            <img src="https://s21.ax1x.com/2025/07/17/pV3MbfP.jpg" alt="初组装" class="w-full h-48 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/17/pV3MHYt.jpg" alt="初组装" class="w-full h-48 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/17/pV3MLSf.jpg" alt="初组装" class="w-full h-48 object-cover rounded-lg image-zoom">
                            
                        </div>
                    </div>
                    
                    <div class="expand-trigger flex justify-center items-center mt-4 cursor-pointer group">
                        <div class="w-16 h-16 rounded-full bg-primary/10 backdrop-blur-md flex items-center justify-center transition-all duration-300 group-hover:bg-primary/20 animate-pulse-slow">
                            <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
                                <i class="fa fa-chevron-down text-sm transition-transform duration-700 transform"></i>
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-center mt-6">
                        <button class="reflect-btn bg-secondary/10 hover:bg-secondary/20 text-secondary px-6 py-3 rounded-lg transition-all flex items-center gap-2 glow-hover">
                            <i class="fa fa-lightbulb-o animate-pulse-slow"></i>
                            <span>查看总结与反思</span>
                        </button>
                    </div>
                </div>
                <div class="journal-entry hidden bg-white rounded-xl shadow-lg p-6 md:p-8 journal-transition blur-section" data-day="11">
                    <h3 class="text-2xl font-bold mb-2">整车架构组装</h3>
                    <p class="text-gray-500 mb-6">第十一天（7月15日）</p>
                    <p class="mb-4">今天上午，我们小组进行了3D打印任务。首先，我们对现有的直角角码进行了细致的观察，并结合网上查询的相关资料，确定了直角角码的具体尺寸参数。随后，我们使用360 Fusion软件进行3D建模，在建模过程中，小组成员之间进行了充分的讨论和交流，不断调整模型细节，确保其准确性。完成建模后，我们前往3D打印室，顺利将直角角码的3D模型打印出来。</p>
                    
                    <div class="more-details overflow-hidden max-h-56 opacity-100 transition-all duration-1000 ease-in-out">
                        <p class="mb-4">下午，我们继续推进车辆的组装工作。首先，我们将车辆的座位部分安装到车架上，确保其稳固性和舒适性。接着，我们完成了前后轮的安装，使车架具备了基本的行驶功能。整个过程中，大家分工协作，提高了组装效率。 </p>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
                            <img src="https://s21.ax1x.com/2025/07/15/pV1dudK.png" alt="4040角标" class="w-full h-48 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/15/pV1dKIO.jpg" alt="整车架构" class="w-full h-48 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/15/pV1d1RH.png" alt="亚克力切割示意图" class="w-full h-48 object-cover rounded-lg image-zoom">
                            
                        </div>
                    </div>
                    
                    <div class="expand-trigger flex justify-center items-center mt-4 cursor-pointer group">
                        <div class="w-16 h-16 rounded-full bg-primary/10 backdrop-blur-md flex items-center justify-center transition-all duration-300 group-hover:bg-primary/20 animate-pulse-slow">
                            <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
                                <i class="fa fa-chevron-down text-sm transition-transform duration-700 transform"></i>
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-center mt-6">
                        <button class="reflect-btn bg-secondary/10 hover:bg-secondary/20 text-secondary px-6 py-3 rounded-lg transition-all flex items-center gap-2 glow-hover">
                            <i class="fa fa-lightbulb-o animate-pulse-slow"></i>
                            <span>查看总结与反思</span>
                        </button>
                    </div>
                </div>
                <!-- 第12天 -->
                <div class="journal-entry hidden bg-white rounded-xl shadow-lg p-6 md:p-8 journal-transition blur-section" data-day="12">
                    <h3 class="text-2xl font-bold mb-2">整车架构组装</h3>
                    <p class="text-gray-500 mb-6">第十二天（7月16日）</p>
                    <p class="mb-4">今天上午，我们小组主要围绕方向盘的安装固定和脚踏平台的搭建展开工作。 首先进行方向盘的固定，最初尝试使用电工胶布将方向盘缠绕固定在操纵杆上，但由于胶布的摩擦力不足，方向盘在受力时容易松动，导致固定失败，接着改用热熔胶填充方向盘中心孔与操纵杆之间的缝隙，试图增加固定强度，然而，由于热熔胶的刚性不足，在受力后仍然出现脱落现象，未能达到预期效果，最终，我们决定采用机械固定的方式，在方向盘轴的位置钻了一个孔，用长螺丝贯穿，并用螺母锁紧。该方法成功实现了方向盘的稳固连接，解决了之前的松动问题。接着我们搭建了脚踏平台，为了提升驾驶舒适性，我们在车架两侧使用铝型材和直角角码搭建了脚踏平台，确保驾驶员在操作时有稳定的脚部支撑，通过调整铝型材的长度和角度，使脚踏位置符合人体工学，避免长时间驾驶时的疲劳感。</p>
                    
                    <!-- 包裹详细内容（默认折叠部分） -->
                    <div class="more-details overflow-hidden max-h-56 opacity-100 transition-all duration-1000 ease-in-out">
                        <p class="mb-4">下午的工作重点在于亚克力板切割、线路优化及车内布局调整。 首先是亚克力板的切割与加工，在亚克力板上精确绘制了车架中间平台的切割轮廓，并使用切割工具进行加工，切割完成后，发现部分边缘较为锋利，后续需进行打磨处理，以确保安装时的安全性和平整度。 然后是线路的优化与焊接加固，对车内的电线布局进行了重新整理，特别是电位器、控制板等关键部件的连接线，使用电工胶布进行捆扎，减少杂乱，在重要的电气连接点（如电位器接线处）进行了焊接加固，以提高信号传输的稳定性，避免接触不良。最后对车内机械与电子器件布局进行了调整，重新规划了电机、控制模块、电源等部件的摆放位置，确保各组件之间留有足够的散热空间，优化了走线路径，使整体结构更加整洁，便于后续维护和调试。 </p>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
                            <img src="https://s21.ax1x.com/2025/07/16/pV1Ljqs.jpg" alt="车辆细节图" class="w-full h-48 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/16/pV1LxZn.jpg" alt="车辆细节图" class="w-full h-48 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/16/pV1Lzaq.jpg" alt="车辆细节图" class="w-full h-48 object-cover rounded-lg image-zoom">
                            <img src="https://s21.ax1x.com/2025/07/16/pV1LXrj.jpg" alt="车辆细节图" class="w-full h-48 object-cover rounded-lg image-zoom">
                            
                        </div>
                    </div>
                    
                    <!-- 展开/折叠按钮 -->
                    <div class="expand-trigger flex justify-center items-center mt-4 cursor-pointer group">
                        <div class="w-16 h-16 rounded-full bg-primary/10 backdrop-blur-md flex items-center justify-center transition-all duration-300 group-hover:bg-primary/20 animate-pulse-slow">
                            <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
                                <i class="fa fa-chevron-down text-sm transition-transform duration-700 transform"></i>
                            </div>
                        </div>
                    </div>

                    <!-- 总结与反思按钮 -->
                    <div class="flex justify-center mt-6">
                        <button class="reflect-btn bg-secondary/10 hover:bg-secondary/20 text-secondary px-6 py-3 rounded-lg transition-all flex items-center gap-2 glow-hover">
                            <i class="fa fa-lightbulb-o animate-pulse-slow"></i>
                            <span>查看总结与反思</span>
                        </button>
                    </div>
                </div>

                <div class="journal-entry hidden bg-white rounded-xl shadow-lg p-6 md:p-8 journal-transition blur-section" data-day="13">
                    <h3 class="text-2xl font-bold mb-2">整车系统联调</h3>
                    <p class="text-gray-500 mb-6">第十三天（7月17日）</p>
                    <p class="mb-4">开展软硬件协同测试，验证启动、加速、制动等整车功能，发现并修复3处逻辑漏洞（如制动优先级不足）。</p>
                    <p class="mb-4">通过CAN总线实时监控系统状态，记录各模块工作数据，为最终性能测试提供基准参考。</p>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
                        <img src="https://s21.ax1x.com/2025/07/13/pVlsQN6.jpg" alt="开心" class="w-full h-48 object-cover rounded-lg image-zoom">
                        <img src="https://s21.ax1x.com/2025/07/13/pVlsMAx.jpg" alt="联调数据" class="w-full h-48 object-cover rounded-lg image-zoom">
                        <img src="https://s21.ax1x.com/2025/07/13/pVlsuH1.jpg" alt="后驱" class="w-full h-48 object-cover rounded-lg image-zoom">
                        <img src="https://s21.ax1x.com/2025/07/13/pVlsl4K.png" alt="整车3D建模" class="w-full h-48 object-cover rounded-lg image-zoom">
                    </div>
                    
                    <div class="flex justify-center mt-6">
                        <button class="reflect-btn bg-secondary/10 hover:bg-secondary/20 text-secondary px-6 py-3 rounded-lg transition-all flex items-center gap-2 glow-hover ripple">
                            <i class="fa fa-lightbulb-o animate-pulse-slow"></i>
                            <span>查看总结与反思</span>
                        </button>
                    </div>
                </div>

                <div class="journal-entry hidden bg-white rounded-xl shadow-lg p-6 md:p-8 journal-transition blur-section" data-day="14">
                    <h3 class="text-2xl font-bold mb-2">最终验收测试与总结</h3>
                    <p class="text-gray-500 mb-6">第十四天（7月18日）</p>
                    <p class="mb-4">完成续航（满电续航25km）、极速（45km/h）、制动距离（≤3m）等性能测试，各项指标符合设计要求。</p>
                    <p class="mb-4">整理项目文档（原理图、代码、测试报告），复盘过程中的技术难点与解决方案，规划后续迭代方向。</p>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
                        <img src="https://picsum.photos/id/515/600/400" alt="性能测试报告截图" class="w-full h-48 object-cover rounded-lg image-zoom">
                        <img src="https://picsum.photos/id/616/600/400" alt="项目总结会议" class="w-full h-48 object-cover rounded-lg image-zoom">
                    </div>
                    
                    <div class="flex justify-center mt-6">
                        <button class="reflect-btn bg-secondary/10 hover:bg-secondary/20 text-secondary px-6 py-3 rounded-lg transition-all flex items-center gap-2 glow-hover ripple">
                            <i class="fa fa-lightbulb-o animate-pulse-slow"></i>
                            <span>查看总结与反思</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="summary" class="py-20 bg-white relative">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16 animate-on-scroll">
                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 font-heading">项目总结</h2>
                <div class="w-20 h-1 bg-primary mx-auto mb-6 animate-scale-in"></div>
                <p class="text-gray-600 max-w-2xl mx-auto">
                    十四天电子卡丁车开发的成果与经验
                </p>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center animate-on-scroll">
                <div>
                    <h3 class="text-2xl font-bold mb-6">开发成果</h3>
                    <p class="mb-6">经过十四天的紧张开发，我们成功完成了电子卡丁车的从无到有，实现了预定的所有功能目标。</p>
                    
                    <div class="space-y-4">
                        <div class="flex items-start animate-slide-right animate-delay-100">
                            <i class="fa fa-check-circle text-primary mt-1 mr-3 animate-pulse-slow"></i>
                            <div>
                                <h4 class="font-semibold text-lg mb-3">三电系统功能完善</h4>
                                <p class="text-gray-600">动力系统、控制系统和传感系统均达到设计指标</p>
                            </div>
                        </div>
                        <div class="flex items-start animate-slide-right animate-delay-200">
                            <i class="fa fa-check-circle text-primary mt-1 mr-3 animate-pulse-slow"></i>
                            <div>
                                <h4 class="font-semibold text-lg mb-3">整车组装完成</h4>
                                <p class="text-gray-600">各系统集成良好，机械结构稳定可靠</p>
                            </div>
                        </div>
                        <div class="flex items-start animate-slide-right animate-delay-300">
                            <i class="fa fa-check-circle text-primary mt-1 mr-3 animate-pulse-slow"></i>
                            <div>
                                <h4 class="font-semibold text-lg mb-3">性能测试达标</h4>
                                <p class="text-gray-600">最高速度50km/h，续航里程预估5km，满足设计要求</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="animate-fade-in animate-delay-300">
                    <canvas id="performanceChart" width="400" height="300"></canvas>
                </div>
            </div>
            
            <div class="mt-16 animate-on-scroll">
                <h3 class="text-2xl font-bold mb-8 text-center">项目时间线</h3>
                <div class="relative">
                    <div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-primary/20"></div>
                    
                    <div class="mb-12 relative z-10">
                        <div class="flex items-center">
                            <div class="bg-primary w-8 h-8 rounded-full flex items-center justify-center text-white font-bold absolute left-1/2 transform -translate-x-1/2 animate-pulse-slow">1</div>
                            <div class="w-1/2 pr-8 text-right">
                                <h4 class="font-bold text-lg">项目启动</h4>
                                <p class="text-gray-600">团队组建与任务分配</p>
                                <p class="text-sm text-gray-500">7月5日</p>
                            </div>
                            <div class="w-1/2"></div>
                        </div>
                    </div>
                    
                    <div class="mb-12 relative z-10">
                        <div class="flex items-center">
                            <div class="bg-primary w-8 h-8 rounded-full flex items-center justify-center text-white font-bold absolute left-1/2 transform -translate-x-1/2 animate-pulse-slow">2</div>
                            <div class="w-1/2"></div>
                            <div class="w-1/2 pl-8">
                                <h4 class="font-bold text-lg">三电系统开发</h4>
                                <p class="text-gray-600">电池、电驱、电控系统独立开发</p>
                                <p class="text-sm text-gray-500">7月6日-11日</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-12 relative z-10">
                        <div class="flex items-center">
                            <div class="bg-primary w-8 h-8 rounded-full flex items-center justify-center text-white font-bold absolute left-1/2 transform -translate-x-1/2 animate-pulse-slow">3</div>
                            <div class="w-1/2 pr-8 text-right">
                                <h4 class="font-bold text-lg">系统整合</h4>
                                <p class="text-gray-600">三电系统协同工作调试</p>
                                <p class="text-sm text-gray-500">7月12日-13日</p>
                            </div>
                            <div class="w-1/2"></div>
                        </div>
                    </div>
                    
                    <div class="mb-12 relative z-10">
                        <div class="flex items-center">
                            <div class="bg-primary w-8 h-8 rounded-full flex items-center justify-center text-white font-bold absolute left-1/2 transform -translate-x-1/2 animate-pulse-slow">4</div>
                            <div class="w-1/2"></div>
                            <div class="w-1/2 pl-8">
                                <h4 class="font-bold text-lg">整车组装</h4>
                                <p class="text-gray-600">机械结构与电子系统整合</p>
                                <p class="text-sm text-gray-500">7月14日-16日</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="relative z-10">
                        <div class="flex items-center">
                            <div class="bg-primary w-8 h-8 rounded-full flex items-center justify-center text-white font-bold absolute left-1/2 transform -translate-x-1/2 animate-pulse-slow">5</div>
                            <div class="w-1/2 pr-8 text-right">
                                <h4 class="font-bold text-lg">验收测试</h4>
                                <p class="text-gray-600">性能测试与项目总结</p>
                                <p class="text-sm text-gray-500">7月17日-18日</p>
                            </div>
                            <div class="w-1/2"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer class="bg-dark text-white py-12 relative overflow-hidden">
        <div class="absolute inset-0">
            <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-primary/10 to-dark"></div>
            <div class="absolute top-1/4 left-1/4 w-64 h-64 bg-primary/10 rounded-full filter blur-3xl animate-pulse-slow"></div>
            <div class="absolute bottom-1/3 right-1/4 w-48 h-48 bg-secondary/10 rounded-full filter blur-3xl animate-pulse-slow"></div>
        </div>
        
        <div class="container mx-auto px-4 relative z-10">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center animate-spin-slow">
                            <i class="fa fa-car text-primary text-xl"></i>
                        </div>
                        <span class="text-xl font-bold text-gradient font-heading">电子卡丁车<span class="text-primary">日志</span></span>
                    </div>
                    <p class="text-gray-400 mb-4">
                        记录电子卡丁车从概念设计到原型实现的全过程，分享团队协作、技术挑战与解决方案。
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transform hover:scale-125 transition-all">
                            <i class="fa fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transform hover:scale-125 transition-all">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transform hover:scale-125 transition-all">
                            <i class="fa fa-github text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transform hover:scale-125 transition-all">
                            <i class="fa fa-linkedin text-xl"></i>
                        </a>
                    </div>
                </div>

                <div>
                    <h4 class="text-lg font-semibold mb-4">快速链接</h4>
                    <ul class="space-y-2">
                        <li><a href="#about" class="text-gray-400 hover:text-white transition-colors nav-item">关于项目</a></li>
                        <li><a href="#team" class="text-gray-400 hover:text-white transition-colors nav-item">团队成员</a></li>
                        <li><a href="#journal" class="text-gray-400 hover:text-white transition-colors nav-item">实习日志</a></li>
                        <li><a href="#summary" class="text-gray-400 hover:text-white transition-colors nav-item">性能数据</a></li>
                        <li><a href="#contact" class="text-gray-400 hover:text-white transition-colors nav-item">联系我们</a></li>
                    </ul>
                </div>

                <div>
                    <h4 class="text-lg font-semibold mb-4">联系方式</h4>
                    <ul class="space-y-2">
                        <li class="flex items-center">
                            <i class="fa fa-map-marker text-primary mr-2 animate-bounce-slow"></i>
                            <span class="text-gray-400">四川省成都市郫都区犀浦镇犀安路999号</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone text-primary mr-2 animate-bounce-slow"></i>
                            <span class="text-gray-400">+86 177 1109 1185</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope text-primary mr-2 animate-bounce-slow"></i>
                            <span class="text-gray-400">contact@electric-kart.com</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-clock-o text-primary mr-2 animate-bounce-slow"></i>
                            <span class="text-gray-400">周一至周五: 9:00 - 18:00</span>
                        </li>
                    </ul>
                </div>

                <div>
                    <h4 class="text-lg font-semibold mb-4">订阅更新</h4>
                    <p class="text-gray-400 mb-4">
                        订阅我们的通讯，获取项目最新进展和技术分享。
                    </p>
                    <form class="space-y-2">
                        <input 
                            type="email" 
                            placeholder="您的邮箱地址" 
                            class="w-full px-4 py-2 rounded-md bg-gray-800 border border-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-primary/50"
                        >
                        <button 
                            type="submit" 
                            class="w-full bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md transition-all transform hover:scale-105 glow-hover ripple"
                        >
                            订阅
                        </button>
                    </form>
                </div>
            </div>
            <div class="mt-8 text-center text-gray-500 border-t border-gray-800 pt-4">
                &copy; 2025 Lans电子卡丁车开发团队. 保留所有权利.
            </div>
        </div>
    </footer>

    <button 
        id="back-to-top" 
        class="fixed bottom-8 right-8 bg-primary text-white rounded-full p-3 shadow-lg hover:shadow-xl transition-all hidden animate-bounce-slow"
    >
        <i class="fa fa-angle-up text-xl"></i>
    </button>
    <div 
        id="member-modal" 
        class="fixed inset-0 bg-black/30 backdrop-blur-md flex items-center justify-center z-50 opacity-0 pointer-events-none transition-all duration-300"
    >
        <div class="bg-white rounded-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto m-4 transform scale-95 transition-all">
            <div class="p-6 border-b">
                <div class="flex justify-between items-center">
                    <h3 class="text-2xl font-bold" id="modal-title">成员详情</h3>
                    <button id="close-modal" class="text-gray-500 hover:text-gray-700">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            <div class="p-6" id="modal-content">
            </div>
        </div>
    </div>

    <div id="reflect-modal" class="fixed inset-0 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300">
        <div class="absolute inset-0 bg-black/50 backdrop-blur-md transition-all duration-500"></div>
        
        <div class="relative bg-white rounded-xl max-w-2xl w-full max-h-[80vh] overflow-y-auto m-4 transform scale-95 transition-all duration-500">
            <div class="p-6 border-b flex justify-between items-center">
                <h3 class="text-xl font-bold" id="reflect-title">总结与反思</h3>
                <button id="close-reflect-modal" class="text-gray-500 hover:text-gray-700 transition-colors">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            <div class="p-6">
                <h4 class="font-semibold text-lg mb-3 text-primary">今日成果</h4>
                <ul id="reflect-achievements" class="list-disc pl-5 mb-6 space-y-2">
                </ul>
                
                <h4 class="font-semibold text-lg mb-3 text-primary">遇到的问题</h4>
                <ul id="reflect-problems" class="list-disc pl-5 mb-6 space-y-2">
                </ul>
                
                <h4 class="font-semibold text-lg mb-3 text-primary">改进措施</h4>
                <ul id="reflect-improvements" class="list-disc pl-5 mb-6 space-y-2">
                </ul>
                
                <h4 class="font-semibold text-lg mb-3 text-primary">明日计划</h4>
                <ul id="reflect-plans" class="list-disc pl-5 space-y-2">
                </ul>
            </div>
        </div>
    </div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const loader = document.getElementById('loader');
    setTimeout(() => {
        loader.style.opacity = '0';
        loader.style.visibility = 'hidden';
    }, 2000);

    const teamMembers = {
        1: {
            name: '兰云皓',
            role: '项目负责人&电池开发',
            image: 'https://s21.ax1x.com/2025/07/17/pV3QSTs.jpg',
            bio: '集成电路科学与工程学院学生。负责项目整体规划、进度管理和技术决策，协调各成员工作，确保项目按计划推进。',
            skills: ['项目管理', '嵌入式系统', '技术决策', '团队协调']
        },
        2: {
            name: '章渝忠',
            role: '电驱设计',
            image: 'https://s21.ax1x.com/2025/07/17/pV3MxmQ.jpg',
            bio: '集成电路科学与工程学院学生，负责电机驱动技术。在项目中专注于电机选型、驱动电路设计和动力系统优化。',
            skills: ['电机驱动', '电路设计', '系统优化']
        },
        3: {
            name: '潘昱昇',
            role: '电池开发',
            image: 'https://s21.ax1x.com/2025/07/17/pV3MjOg.jpg',
            bio: '集成电路科学与工程学院学生，负责电池系统开发。在项目中负责电池选型、电池管理系统设计和电源电路优化。',
            skills: ['电池管理', '电路设计', '安全优化']
        },
        4: {
            name: '李孟林',
            role: '电控设计',
            image: 'https://s21.ax1x.com/2025/07/17/pV3Mzwj.jpg',
            bio: '智慧学院学生，负责电路控制技术。在项目中专注于控制算法开发、嵌入式编程和系统集成。',
            skills: ['电路控制', '嵌入式编程', '算法开发']
        },
        5: {
            name: '何欣隆',
            role: '电控设计',
            image: 'https://s21.ax1x.com/2025/07/17/pV3MX6S.jpg',
            bio: '集成电路科学与工程学院学生，负责电路控制技术。在项目中负责文档撰写、3D建模和打印、以及系统集成。',
            skills: ['文档撰写', '3D建模', '系统集成']
        }
    };

    const reflections = {
        1: {
            achievements: [
                '项目正式启动，团队组建完成',
                '明确了项目目标和整体计划',
                '完成了任务分配，确定了每个人的职责范围'
            ],
            problems: [
                '团队成员之间沟通不够充分',
                '部分成员对项目技术细节理解不够深入',
                '项目时间规划不够详细'
            ],
            improvements: [
                '建立每日晨会制度，加强团队沟通',
                '安排技术分享会，加深成员对项目的理解',
                '制定详细的项目进度表'
            ],
            plans: [
                '开始三电系统的方案设计',
                '准备项目所需物料清单',
                '安排安全培训和技术培训'
            ]
        },
        2: {
            achievements: [
                '完成了峨眉校区实地走访调研',
                '明确了电子卡丁车的使用场景和需求',
                '完成了gitee仓库创建和网站搭建'
            ],
            problems: [
                '调研时间安排较紧，部分区域未能详细考察',
                '对山区地形带来的技术挑战预估不足',
                '网站搭建进度落后于计划'
            ],
            improvements: [
                '延长调研时间，确保覆盖所有关键区域',
                '组织技术讨论会，解决山区地形带来的挑战',
                '增加网站开发资源，加快进度'
            ],
            plans: [
                '完成动力系统设计方案',
                '确定电池组配置方案',
                '开始绘制系统架构图'
            ]
        },
        3: {
            achievements: [
                '领取了制作电车所需物料',
                '完成单节锂电池充电器的制作',
                '成功使用直流电源驱动电机正反转'
            ],
            problems: [
                '物料清单与实际需求有差异',
                '锂电池充电器制作过程遇到焊接问题',
                '电机驱动测试时出现不稳定现象'
            ],
            improvements: [
                '重新核对物料清单，补充缺失物料',
                '加强焊接技术培训',
                '优化电机驱动电路设计'
            ],
            plans: [
                '开始电池组组装',
                '进行电控系统开发环境搭建',
                '编写Blink测试程序'
            ]
        },
        4: {
            achievements: [
                '完成电池组的组装与测试',
                '使得OLED可以显示信息',
                '成功驱动电机进行正反转测试'
            ],
            problems: [
                '电池组装过程中出现短路问题',
                'OLED显示模块连接不稳定',
                '电机驱动电路连接出错'
            ],
            improvements: [
                '李君老师指导下重新组装电池组',
                '使用焊接连接电路',
                '电机驱动电路重新布线'
            ],
            plans: [
                '准备各个系统同意调试',
                '完成电池组与电机驱动的连接',
                '改进电控系统的编程工作'
            ]
        },
        5: {
            achievements: [
                '电驱系统与电控系统初步结合',
                '完成电池开关焊接和测试',
                '实现系统关键参数的实时显示'
            ],
            problems: [
                '系统协同工作时出现通信延迟',
                '电池开关焊接质量不稳定',
                '参数显示刷新率不足'
            ],
            improvements: [
                '优化系统通信协议',
                '改进焊接工艺',
                '提高参数显示刷新率'
            ],
            plans: [
                '完成三电系统深度整合',
                '优化系统控制算法',
                '开始整车机械结构设计'
            ]
        },
        6: {
            achievements: [
                '完成三电系统PCB原理图绘制',
                '实现电池电压/电流数据在OLED屏幕的实时显示',
                '成功完成三电系统首次联合调试'
            ],
            problems: [
                'PCB布线时无法准确找到对应的元器件',
                '电池组与OLED与INA219使用的I2C通道产生冲突',
                'esp32焊接时出现虚焊，导致电源不稳定'
            ],
            improvements: [
                '尽可能找到贴近所用器材标准的元器件',
                '统一通信协议波特率为11250，重新定义I2C通道',
                '优化代码逻辑，使屏幕刷新与数据采集保持同步'
            ],
            plans: [
                '完成PCB板打样文件输出',
                '优化三电系统协同控制算法',
                '开始准备整车机械结构组装方案'
            ]
        },
        7: {
            achievements: [
                '完成系统功能图',
                '完成FMECA分析',
                '完成FTA树状故障分析图'
            ],
            problems: [
                '系统功能图无法很好地展示各模块间的关系',
                'FMECA评分标准不统一',
                'FTA分析中部分故障模式未考虑到',
            ],
            improvements: [
                '功能图细化分解模块',
                'FMECA评分采用平均值并且RNP计算采用O*S*D来消除权重影响',
                'FTA分析中增加考虑范围',
            ],
            plans: [
                '改进INA219模块',
                '改进三电系统整合',
                '改进PCB布线'
            ]
        },
        8: {
            achievements: [
                '完成PCB并下单',
                '完成整车建模',
                '完成供能系统设计'
            ],
            problems: [
                '整车实际参数无法测量',
                'PCB线宽出现疑惑',
                '无PCB配合，供能系统设计也存在疑点'
            ],
            improvements: [
                '采取估算',
                '与电池连接部分直接采用2.5线宽',
                '供能系统设计采用电池组与电机驱动直接连接的方式',
            ],
            plans: [
                '测量整车实际参数',
                '切割整车所需铝材',
                '完成整车架构拼接'
            ]
        },
        9: {
            achievements: [
                '完成整车架构大幅度优化，包括电池组位置调整，人体工学设计调整，铝材重调整',
                '完成铝材的切割',
                '优化了材料的消耗'
            ],
            problems: [
                '无法确定方向盘与前后轮的连接方式',
                '铝材切割精度不足，且铝材厚度没有考虑',
                '直角搭所能申请数量过低，无法完成整车结构稳定固定'
            ],
            improvements: [
                '欲将前后轮连轴固定在铝材上',
                '重设计',
                '继续跟老师讨价还价，争取更多直角搭',
            ],
            plans: [
                '进行系统功能测试',
                '进行铝材的拼接',
                
            ]
        },
        10: {
            achievements: [
                '完成了车架结构的优化设计，提高了稳定性和安全性',
                '切割并准备了新的铝材，为车架搭建奠定了基础',
                '成功通过老师审核，领取材料并完成车架的初步拼接'
            ],
            problems: [
                '部分铝材切割尺寸存在微小误差，导致拼接时出现轻微偏差',
                '连接件的安装顺序需要反复调整，影响了搭建效率',
                '车架部分节点的紧固度不足，需进一步加固'
            ],
            improvements: [
                '在切割铝材时加强测量和标记的准确性，减少尺寸误差',
                '提前规划连接件的安装顺序，优化组装流程',
                '对关键节点增加螺丝或角码固定，确保结构稳固'
            ],
            plans: [
                '对已搭建的车架进行加固和细节优化',
                '开始安装小车的动力系统和传动部件',
                ' 测试车架的承重能力和稳定性，记录数据以便进一步改进'
            ]
        },
        11: {
            achievements: [
                '完成直角角码的3D建模与打印',
                '成功安装车辆座位，确保稳固',
                '完成前后轮的安装，使车架具备基本行驶功能'
            ],
            problems: [
                '直角角码的尺寸测量存在微小误差，影响打印精度',
                '座位安装时发现部分螺丝孔位不匹配',
                '车轮安装后出现轻微晃动现象'
            ],
            improvements: [
                '优化测量方法，提高3D建模的精确度',
                '调整座位固定方式，或重新打孔确保匹配',
                '检查车轮安装结构，加固连接部位以减少晃动'
            ],
            plans: [
                '进一步完善车体结构，检查各部件稳固性',
                '测试车轮运行情况，解决晃动问题',
                '开始进行车辆动力系统的初步安装与调试'
            ]
        },
        12: {
            achievements: [
                '成功采用螺丝螺母机械固定方式，解决了方向盘与操纵杆的连接问题',
                '完成车架两侧脚踏平台的搭建，提升了驾驶舒适性',
                '完成亚克力板切割，优化了车内线路布局，提高了电子系统的稳定性'
            ],
            problems: [
                '初期使用胶布和热熔胶固定方向盘效果不佳，反复尝试后改用机械固定',
                '切割后的亚克力板边缘较锋利，需进一步打磨处理',
                '部分线路仍存在杂乱现象，可能影响后续调试和维护'
            ],
            improvements: [
                '优先采用机械固定（如螺丝、卡扣）替代胶粘方式，确保结构稳固',
                '对亚克力板切割边缘进行精细打磨，避免划伤或安装不平整',
                '使用扎带、线槽进一步整理线路，并标注关键接口，方便检修'
            ],
            plans: [
                '完成亚克力平台的安装，并测试其承重和稳定性',
                '全面检查焊接点及线路连接，确保无短路或接触不良',
                '开始方向盘与电位器的信号调试，验证控制系统的灵敏度与准确性'
            ]
        },
        13: {
            achievements: [
                '完成软硬件协同测试',
                '修复3处逻辑漏洞',
                '实现CAN总线实时监控'
            ],
            problems: [
                '制动优先级不足',
                '系统启动过程不稳定',
                '数据记录功能效率低'
            ],
            improvements: [
                '重构制动控制逻辑',
                '优化系统启动流程',
                '改进数据记录算法'
            ],
            plans: [
                '进行最终性能测试',
                '优化系统稳定性',
                '准备项目总结报告'
            ]
        },
        14: {
            achievements: [
                '完成续航、极速等性能测试',
                '整理项目文档',
                '复盘技术难点与解决方案'
            ],
            problems: [
                '续航测试结果与预期有差距',
                '部分文档缺失',
                '部分技术难点未完全解决'
            ],
            improvements: [
                '优化能量管理系统',
                '补充缺失文档',
                '规划后续迭代方向'
            ],
            plans: [
                '项目总结汇报',
                '展示最终成果',
                '规划产品化路线'
            ]
        }
    };

    const modal = document.getElementById('member-modal');
    const modalTitle = document.getElementById('modal-title');
    const modalContent = document.getElementById('modal-content');
    const closeModal = document.getElementById('close-modal');

    const reflectModal = document.getElementById('reflect-modal');
    const closeReflect = document.getElementById('close-reflect-modal');
    const reflectTitle = document.getElementById('reflect-title');
    const reflectAchievements = document.getElementById('reflect-achievements');
    const reflectProblems = document.getElementById('reflect-problems');
    const reflectImprovements = document.getElementById('reflect-improvements');
    const reflectPlans = document.getElementById('reflect-plans');

    const imageModal = document.getElementById('image-modal');
    const zoomedImage = document.getElementById('zoomed-image');
    const imageCaption = document.getElementById('image-caption');
    const closeImageModal = document.getElementById('image-modal-close');

    function showModal(member) {
        modalTitle.textContent = member.name;
        modalContent.innerHTML = `
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="md:col-span-1">
                    <img src="${member.image}" alt="${member.name}" class="w-full h-64 object-cover rounded-lg shadow-md">
                </div>
                <div class="md:col-span-2">
                    <p class="text-xl text-primary mb-4">${member.role}</p>
                    <p class="mb-6">${member.bio}</p>
                    
                    <h4 class="font-semibold text-lg mb-3">专业技能</h4>
                    <div class="flex flex-wrap gap-2">
                        ${member.skills.map(skill => `
                            <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">${skill}</span>
                        `).join('')}
                    </div>
                </div>
            </div>
        `;
        modal.classList.add('opacity-100', 'pointer-events-auto');
        modal.classList.remove('opacity-0', 'pointer-events-none');
        modal.querySelector('.bg-white').classList.add('scale-100');
        modal.querySelector('.bg-white').classList.remove('scale-95');
    }

    function hideModal() {
        modal.classList.add('opacity-0', 'pointer-events-none');
        modal.classList.remove('opacity-100', 'pointer-events-auto');
        modal.querySelector('.bg-white').classList.add('scale-95');
        modal.querySelector('.bg-white').classList.remove('scale-100');
    }

    function showReflectModal(day) {
        const data = reflections[day];
        if (!data || !reflectModal) return;

        reflectTitle.textContent = `第${day}天总结与反思`;

        reflectAchievements.innerHTML = data.achievements.map(item => `<li>${item}</li>`).join('');

        reflectProblems.innerHTML = data.problems.map(item => `<li>${item}</li>`).join('');

        reflectImprovements.innerHTML = data.improvements.map(item => `<li>${item}</li>`).join('');

        reflectPlans.innerHTML = data.plans.map(item => `<li>${item}</li>`).join('');

        reflectModal.classList.remove('opacity-0', 'pointer-events-none');
        reflectModal.classList.add('opacity-100', 'pointer-events-auto');
        reflectModal.querySelector('.bg-white').classList.add('scale-100');
        reflectModal.querySelector('.bg-white').classList.remove('scale-95');
    }

    function closeReflectModal() {
        reflectModal.classList.add('opacity-0', 'pointer-events-none');
        reflectModal.classList.remove('opacity-100', 'pointer-events-auto');
        reflectModal.querySelector('.bg-white').classList.add('scale-95');
        reflectModal.querySelector('.bg-white').classList.remove('scale-100');
    }
    
    function showImageModal(src, alt) {
        zoomedImage.src = src;
        zoomedImage.alt = alt;
        imageCaption.textContent = alt;
        imageModal.classList.add('active');
    }
    
    function closeImageModalFunc() {
        imageModal.classList.remove('active');
    }

    document.querySelectorAll('.team-card').forEach(card => {
        card.addEventListener('click', function() {
            const memberId = this.getAttribute('data-id');
            const member = teamMembers[memberId];
            if (member) showModal(member);
        });
    });

    document.querySelectorAll('.reflect-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const day = this.closest('.journal-entry').getAttribute('data-day');
            showReflectModal(day);
        });
    });

    document.querySelectorAll('.image-zoom').forEach(img => {
        img.addEventListener('click', function() {
            showImageModal(this.src, this.alt);
        });
    });

    closeModal.addEventListener('click', hideModal);
    modal.addEventListener('click', (e) => {
        if (e.target === modal) hideModal();
    });

    closeReflect.addEventListener('click', closeReflectModal);
    reflectModal.addEventListener('click', (e) => {
        if (e.target === reflectModal) closeReflectModal();
    });
    
    closeImageModal.addEventListener('click', closeImageModalFunc);
    imageModal.addEventListener('click', (e) => {
        if (e.target === imageModal) closeImageModalFunc();
    });

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            if (!modal.classList.contains('opacity-0')) hideModal();
            if (!reflectModal.classList.contains('opacity-0')) closeReflectModal();
            if (imageModal.classList.contains('active')) closeImageModalFunc();
        }
    });

    const mobileMenuBtn = document.getElementById('mobile-menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');
    mobileMenuBtn.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');
    });

    const navContainer = document.querySelector('#journal .relative');
    const indicator = document.getElementById('navIndicator');

    function updateIndicator() {
        const activeBtn = document.querySelector('.journal-nav.bg-primary');
        if (activeBtn) {
            const rect = activeBtn.getBoundingClientRect();
            const containerRect = navContainer.getBoundingClientRect();
            indicator.style.width = `${rect.width + 12}px`;
            indicator.style.height = `${rect.height + 12}px`;
            indicator.style.left = `${rect.left - containerRect.left - 6}px`;
            indicator.style.top = `${rect.top - containerRect.top - 6}px`;
        }
    }

    setTimeout(updateIndicator, 100);
    window.addEventListener('resize', updateIndicator);

    document.querySelectorAll('.journal-nav').forEach(nav => {
        nav.addEventListener('click', function() {
            const day = this.getAttribute('data-day');
            document.querySelectorAll('.journal-nav').forEach(n => {
                n.classList.remove('bg-primary', 'text-white');
                n.classList.add('bg-white', 'text-primary', 'hover:bg-primary/10');
            });
            this.classList.add('bg-primary', 'text-white');
            setTimeout(updateIndicator, 50);

            const currentEntry = document.querySelector('.journal-entry:not(.hidden)');
            const newEntry = document.querySelector(`.journal-entry[data-day="${day}"]`);

            if (currentEntry) {
                currentEntry.classList.add('journal-fade-out');
                setTimeout(() => {
                    currentEntry.classList.add('hidden');
                    currentEntry.classList.remove('journal-fade-out');
                    newEntry.classList.remove('hidden');
                    newEntry.classList.add('journal-fade-in');
                    setTimeout(() => {
                        newEntry.classList.remove('journal-fade-in');
                    }, 300);
                }, 300);
            } else {
                newEntry.classList.remove('hidden');
            }
        });
    });

    window.addEventListener('scroll', () => {
        const navbar = document.getElementById('navbar');
        navbar.classList.toggle('bg-white', window.scrollY > 50);
        navbar.classList.toggle('shadow-md', window.scrollY > 50);
        navbar.classList.toggle('bg-white/90', window.scrollY <= 50);
    });

    new Chart(document.getElementById('performanceChart'), {
        type: 'radar',
        data: {
            labels: ['动力性能', '控制精度', '传感准确性', '结构稳定性', '续航能力', '安全性'],
            datasets: [{
                label: '实际性能',
                data: [85, 90, 88, 92, 80, 95],
                backgroundColor: 'rgba(22, 93, 255, 0.2)',
                borderColor: 'rgba(22, 93, 255, 1)',
                pointBackgroundColor: 'rgba(22, 93, 255, 1)'
            }, {
                label: '设计目标',
                data: [80, 85, 85, 90, 80, 90],
                backgroundColor: 'rgba(150, 150, 150, 0.2)',
                borderColor: 'rgba(150, 150, 150, 1)',
                pointBackgroundColor: 'rgba(150, 150, 150, 1)'
            }]
        },
        options: {
            scales: {
                r: { beginAtZero: true, max: 100 }
            }
        }
    });

    const backToTop = document.getElementById('back-to-top');
    window.addEventListener('scroll', () => {
        backToTop.classList.toggle('hidden', window.scrollY <= 300);
    });
    backToTop.addEventListener('click', () => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });

    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                window.scrollTo({ top: target.offsetTop - 80, behavior: 'smooth' });
                if (!mobileMenu.classList.contains('hidden')) {
                    mobileMenu.classList.add('hidden');
                }
            }
        });
    });

    document.querySelectorAll('.expand-trigger').forEach(trigger => {
        trigger.addEventListener('click', function() {
            const details = this.previousElementSibling;
            const icon = this.querySelector('i');
            
            if (details.classList.contains('max-h-56')) {
                details.classList.remove('max-h-56');
                details.classList.add('max-h-5000');
                icon.classList.add('rotate-180');
            } else {
                details.classList.remove('max-h-5000');
                details.classList.add('max-h-56');
                icon.classList.remove('rotate-180');
            }
        });
    });
    
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, observerOptions);

    document.querySelectorAll('.animate-on-scroll').forEach(el => {
        observer.observe(el);
    });
    
    const wavePatterns = document.querySelectorAll('.animation-wave');
    wavePatterns.forEach(pattern => {
        pattern.style.animationDelay = `${Math.random() * 5}s`;
    });
});
</script>
</body>
</html>